/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Provider, useSelector} from 'react-redux';
import {Provider as AntdProvider} from '@ant-design/react-native';
import {PersistGate} from 'redux-persist/integration/react';
import {RootState, store, persistor} from '@/stores';
import {themes} from '@/constants/Themes';
import {ErrorBoundary} from '@/components/ErrorBoundary';
import {RouteGuard} from '@/components/RouteGuard';
import {RootNavigator} from '@/components/StackNavigator';
import { ThemeToggleButton } from '@/components/ThemeToggleButton';

import '@/i18ns';
import '@/global.css';


function AppContent(): React.JSX.Element {
  const theme = useSelector((state: RootState) => state.theme.theme);
  const antdTheme = themes[theme].antd;

  return (
    <SafeAreaProvider>
      <GestureHandlerRootView style={{flex: 1}}>
        <AntdProvider theme={antdTheme} key={theme}>
          <ThemeToggleButton />
          <RouteGuard>
            <RootNavigator />
          </RouteGuard>
        </AntdProvider>
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}

export default function RootLayout() {
  return (
    <ErrorBoundary>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <AppContent />
        </PersistGate>
      </Provider>
    </ErrorBoundary>
  );
}
